<template>
	<view class="addGood">
		<u-form :model="form" ref="uForm" label-width="140">
			<u-form-item label="商品名称" prop="productName">
				<u-input v-model="form.productName" placeholder="请输入商品名称" />
			</u-form-item>
			<u-form-item label="商品简介" prop="introduction">
				<!-- <editor id="editor" class="ql-container" placeholder="请输入商品简介" @ready="onEditorReady"></editor> -->
				<u-input v-model="form.introduction" type="textarea" placeholder="请输入商品简介" />
			</u-form-item>
			<u-form-item label="商品类别" prop="categoryName">
				<u-input @click="openCategory" v-model="form.categoryName" placeholder="请点击选择商品类别" disabled />
				<u-select
					v-model="categoryShow"
					mode="single-column"
					:list="categories"
					@confirm="confirmCategory"
				></u-select>
			</u-form-item>
			<u-form-item label="存入数量" prop="stock">
				<u-number-box v-model="form.stock" input-width="120" :min="1"></u-number-box>
			</u-form-item>
			<u-form-item label="商品价格" prop="price">
				<u-number-box v-model="form.price" :positive-integer="false" input-width="120" :min="1"></u-number-box>
			</u-form-item>
			<u-form-item label="商品图片" prop="price">
				<u-upload
					:action="action"
					:file-list="fileList"
					max-count="3"
					:header="headers"
					@on-remove="onRemove"
					@on-success="onSuccess"
					@on-error="onError"
				></u-upload>
			</u-form-item>
		</u-form>
		<view class="dlbutton" hover-class="dlbutton-hover" @click="submit"><text>提交</text></view>
	</view>
</template>
<script>
import { addProduct } from '@/api/product.js';
import { categorie } from '@/api/category.js';
import { proxy } from '@/api/config.js';
export default {
	name: 'AddGood',
	data() {
		return {
			form: {
				productName: undefined, //商品名称
				introduction: undefined, //商品简介
				categoryName: undefined, //商品类别name
				categoryId: undefined, //商品类别id
				stock: 1, //库存
				price: 1, //价格
				onShelf: 1, //上架状态(0:下架,1：上架)
				imgUrls: ''
			},
			categories: [], //类别数组
			categoryShow: false, //类别显示
			rules: {
				productName: [
					{
						required: true,
						message: '请输入商品名称',
						trigger: ['blur', 'change']
					}
				],
				introduction: [
					{
						required: true,
						message: '请输入商品类别',
						trigger: ['blur', 'change']
					}
				],
				categoryName: [
					{
						required: true,
						message: '请输入商品简介',
						trigger: ['blur', 'change']
					}
				]
			},
			action: proxy + '/common/upload', //图片上传地址
			fileList: [], //图片上传列表
			file: [],
			headers: {
				Authorization: 'Bearer ' + uni.getStorageSync('lifeData')
			}, //图片上传头信息
			editorCtx: '' //富文本信息
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(option) {
		this.getCategories();
	},
	onBackPress(e) {
		let pages = getCurrentPages();
		// 前一个页面
		let beforePage = pages[pages.length - 2];
		console.log(beforePage.route);
		if (beforePage.route == 'pages/home/index') beforePage.$vm.refreshPage();
	},
	methods: {
		onEditorReady() {
			// #ifdef MP-BAIDU
			this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
			// #endif

			// #ifdef APP-PLUS || H5 ||MP-WEIXIN
			uni.createSelectorQuery()
				.select('#editor')
				.context(res => {
					this.editorCtx = res.context;
				})
				.exec();
			// #endif
		},
		/**
		 * 获取所有的商品类别
		 */
		getCategories() {
			categorie().then(res => {
				if (res.data) {
					this.categories = res.data;
					this.categories.forEach(element => {
						(element.label = element.categoryName), (element.value = element.categoryId);
					});
				}
			});
		},
		openCategory() {
			this.categoryShow = true;
		},
		// 确认选择类别
		confirmCategory(e) {
			this.form.categoryName = e[0].label;
			this.form.categoryId = e[0].value;
		},
		onRemove(e) {
			this.file.splice(e, 1);
			this.form.imgUrls = this.file.join(',');
		},
		onSuccess(e) {
			this.file.push(e.data['url']);
			this.form.imgUrls = this.file.join(',');
		},
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					let query = {
						productName: this.form.productName, //商品名称
						introduction: this.form.introduction, //商品简介
						categoryId: this.form.categoryId, //商品类别
						stock: this.form.stock, ////库存
						price: this.form.price, //价格
						imgUrls: this.form.imgUrls,
						onShelf: 1 //上架状态(0:下架,1：上架)
					};
					addProduct(query).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '新增成功',
								duration: 2000
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 2000);
						} else {
							uni.showToast({
								title: res.message,
								duration: 2000,
								icon: 'none'
							});
						}
					});
				} else {
					console.log('验证失败');
				}
			});
		}
	}
};
</script>
<style scoped lang="scss">
.addGood {
	padding: 5%;
	.dlbutton {
		color: #ffffff;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}

	.dlbutton-hover {
		background: linear-gradient(-90deg, rgba(63, 205, 235, 0.9), rgba(188, 226, 158, 0.9));
	}
	#editor {
		width: 100%;
		height: 300px;
		background-color: #ffffff;
	}
}
</style>
